
	<!DOCTYPE html>   
   <html lang="en">   
   <head>  
   <meta charset="UTF-8">  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
   <title>Document</title>  
   <link rel="stylesheet" href="./semantic.min.css">  
   <script src="./js/vue.js"></script> 
   <style>  
	        * {  
	            margin: 0;  
	            padding: 0;  
	        }  
	        #app {  
	            text-align: center;  
	        }  
	</style>   
   </head>  
<body>  
    <div id="app">
      <p><button class="ui primary button" v-bind:class="{'blue': lode, 'loading': lode}" @click="lode = !lode">加载...</button></p>  <!-- class="ui primary button"：设置按钮的样式。 -->
    <div class="ui buttons">  
       <button class="ui button active" @click="cancel">取消</button>      
      <div class="or"></div>  
      <button class="ui positive button" @click="start">登录</button>  
      </div>  
   </div>  
   <script>  
      new Vue({  
      el: '#app', 
         data: {  
            lode: false,
            },  
      methods: {  
            cancel() {  
               this.lode = false; 
               },  
            start() {  
               this.lode = true;   
               },  
            },  
   });  
   </script>  
</body>  
</html>